<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-11-23 15:19:53
 * @LastEditTime: 2023-06-30 10:35:34
-->
<script lang="ts" setup name="ActionType">
import { Plus } from '@element-plus/icons-vue'
import type { Ref } from 'vue'
import { ref } from 'vue'
import type { TInsertNode } from '@main/views/approve-workflow/enum'
import { EInsertNode } from '@main/views/approve-workflow/enum'

const emits = defineEmits<{
  (e: 'insertNode', val: string): void
}>()
const handAction = (type: TInsertNode) => {
  refPopover.value?.hide()
  emits('insertNode', type)
}

const refPopover: Ref<null | { hide: Function; }> = ref(null)
</script>

<template>
  <el-popover
    ref="refPopover"
    placement="bottom-start"
    title="添加流程节点"
    width="370"
    trigger="click"
  >
    <div class="node-select">
      <div @click="handAction(EInsertNode.APPROVAL)">
        <i class="ikflow ikflow-shenhe" style="color: rgb(255 148 62);"></i>
        <span>审批人</span>
      </div>
      <div @click="handAction(EInsertNode.DISPOSE)">
        <i class="ikflow ikflow-bianji1" style="color: rgb(50 150 250);"></i>
        <span>办理人</span>
      </div>
      <div @click="handAction(EInsertNode.CC)">
        <i class="ikflow ikflow-chaosong" style="color: rgb(50 150 250);"></i>
        <span>抄送人</span>
      </div>

      <div @click="handAction(EInsertNode.CONDITIONS)">
        <i class="ikflow ikflow-24gf-branches" style="color: rgb(21 188 131);"></i>
        <span>条件分支</span>
      </div>
      <!-- <div @click="handAction(EInsertNode.CONCURRENTS)">
        <i class="ikflow ikflow-yidongyunkongzhitaiicon41" style="color: #718dff"></i>
        <span>并行分支</span>
      </div>
      <div @click="handAction(EInsertNode.DELAY)">
        <i class="ikflow ikflow-shijian" style="color: #f25643"></i>
        <span>延迟等待</span>
      </div>
      <div @click="handAction(EInsertNode.TRIGGER)">
        <i class="ikflow ikflow-chufa" style="color: #15bc83"></i>
        <span>触发器</span>
      </div> -->
    </div>
    <template #reference>
      <el-button :icon="Plus" type="primary" circle />
    </template>
  </el-popover>
</template>

<style lang="scss" scoped>
.node-select {
  div {
    display: inline-block;
    margin: 5px;
    cursor: pointer;
    padding: 10px 15px;
    border: 1px solid var(--ik-input-bg);
    background-color: var(--ik-input-bg);
    border-radius: 10px;
    width: 130px;
    position: relative;
    transition: all 0.2s ease-in;
    box-sizing: content-box;

    span {
      position: absolute;
      left: 65px;
      top: 18px;
    }

    &:hover {
      background-color: var(--ik-input-bg-hover);
      box-shadow: var(--el-box-shadow-light);
    }

    i {
      font-size: 25px;
    }
  }
}
</style>
